<template>
  <!-- 房间搜索页面 -->
  <el-dialog
    width="600px"
    custom-class="customWidth"
    center
    :before-close="closeDialog"
    title="搜索房间"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="addDialogFormVisible"
    class="add"
  >
    <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
      <el-form-item label="区域:" label-width="50px">
        <el-select
          v-model="defaultArea"
          placeholder="请选择"
          size="mini"
          clearable
          @change="selectArea"
        >
          <el-option
            v-for="item in areaInfoList"
            :key="item.areaGuid"
            :label="item.areaName"
            :value="item.areaGuid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼栋:" label-width="50px">
        <el-select v-model="defaultBuilding" placeholder="请选择" size="mini" clearable>
          <el-option label="全部类型" value></el-option>
          <el-option
            v-for="item in buildingInfoList"
            :key="item.buildingGuid"
            :label="item.buildingName"
            :value="item.buildingGuid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房间:" label-width="50px">
        <el-input v-model="roomName" placeholder="名称" size="mini" clearable style="width: 180px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="roomList"
      ref="table"
      border
      highlight-current-row
      style="width: 100%"
      max-height="450"
      @selection-change="handleSelectionChange"
      :header-cell-style="headFirst"
        :cell-style="(res) => headFirst_col(res, [])"
    >
      <el-table-column type="selection" width="40px"></el-table-column>
      <el-table-column prop="areaName" label="区域"></el-table-column>
      <el-table-column prop="areaName" label="楼栋"></el-table-column>
      <el-table-column prop="roomName" label="房间名"></el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChangepage"
        :current-page="currentPage"
        :pager-count="pageSize"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordCount"
        size="mini"
      ></el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addvisible()">取消</el-button>
      <el-button type="primary" @click="addataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // 是否可以选择多个房间
      isCheckbox: false,
      elform: {},
      userGuid: '',
      // 区域信息
      defaultArea: '',
      areaInfoList: [],
      // 楼栋信息
      defaultBuilding: '',
      buildingInfoList: [],
      // 自己输入的房间号
      roomName: '',

      // 控制人员搜索
      addDialogFormVisible: false,
      // 房间列表
      roomList: [],

      dataForm: {
        username: '',
        carnumber: ''
      },
      departmentGuid: [],
      deptTree: [],
      tableData: [],
      pageNum: 1,
      pageSize: 5,
      recordCount: 0,
      currentPage: 1,
      searchInfo: {},
      selectarr: [],
      roomGuid: ''
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  watch: {
    addDialogFormVisible(newVal, oldVal) {
      if (newVal) {
        // this.onSubmit();
      }
    }
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
  },
  mounted() {
    // 区域
    this.getAreaInfo()
  },
  methods: {
    // 右方插插
    closeDialog(done) {
      this.addDialogFormVisible = false
      this.$emit('refbuildDataList', [])
      done()
    },
    // 取消按钮
    addvisible() {
      //   this.departmentGuid = [];
      //   this.tableData = [];
      // this.$refs["dataForm"].resetFields();
      this.addDialogFormVisible = false
      this.$emit('refbuildDataList', [])
    },
    // 确定按钮
    addataFormSubmit() {
      if (this.selectarr.length < 1) {
        this.$message({
          message: '请选择房间',
          type: 'warning'
        })
        return
      }
      if (!this.isCheckbox) {
        if (this.selectarr.length > 1) {
          this.$message({
            message: '只能选择一个房间',
            type: 'warning'
          })
          return
        }
      }

      this.$emit('refbuildDataList', this.selectarr)
      this.addDialogFormVisible = false
    },

    // 父级传参过来
    addinit(roomGuid, isCheckbox) {
      this.roomGuid = roomGuid
      if (isCheckbox) {
        this.isCheckbox = isCheckbox
      }
      this.addDialogFormVisible = true
    },

    // 区域查询
    getAreaInfo() {
      this.$http({
        url: this.$http.adornUrl('/area/room/area-info-search'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.areaInfoList = data.messageContent
          if (this.areaInfoList.length != 0) {
            this.defaultArea = this.areaInfoList[0].areaGuid
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 选择区域后触发
    selectArea() {
      console.log(this.defaultArea)
      this.defaultBuilding = ''
      if (this.defaultArea == '' || this.defaultArea == null) {
        return false
      }
      // 获取对应区域内的楼栋信息
      this.$http({
        url: this.$http.adornUrl('/area/room/get-area-building'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            areaGuid: this.defaultArea
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.buildingInfoList = data.messageContent
          console.log(data.messageContent)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
      // this.getAreaInfo();
    },
    // 查询数据
    onSubmit() {
      let searchInfo = {}
      this.pageNum = 1
      // 区域限定
      if (this.defaultArea == '') {
        this.$message({
          message: '区域必须选择',
          type: 'warning'
        })
        return false
      } else {
        searchInfo.areaGuid = this.defaultArea
        searchInfo.unitGuid = this.changeschoolid
        console.log(this.defaultArea)
      }
      // 楼栋限定
      if (this.defaultBuilding != '') {
        searchInfo.buildingGuid = this.defaultBuilding
      }
      // 房间限定
      if (this.roomName != '') {
        searchInfo.roomName = this.roomName
      }
      this.searchInfo = searchInfo
      this.getlist(searchInfo)
    },
    // 查询数据
    getlist() {
      this.loading = true
      this.$http({
        url: this.$http.adornUrl('/area/room/room-brief-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading = false
        if (data.messageCode == 200) {
          this.roomList = data.messageContent.data || [];
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          if (this.roomList.length == 0) {
            this.$message({
              message: '查询成功,当前暂无数据',
              type: 'success'
            })
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 多选选中触发
    handleSelectionChange(val) {
      this.selectarr = val
      console.log(val)
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.getlist()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getlist()
    }
  }
}
</script>

<style lang="scss" scoped>
.add {
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  /deep/.el-dialog--center .el-dialog__body {
    padding: 0 20px;
    padding-bottom: 0px;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
}
.elformcss {
  margin-bottom: 10px;
  border-bottom: 1px solid #e5e9f2;
}
.page {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>